<template>
  <div class="param-set-wrapper">
    <table-view class="user-table"
                    :cols="cols"
                    :tableData="tableData"
                    :canCheck="true"
                    :showSearch="true"
                    :searchCondition="searchCondition"
                    :showOperate="true"
                    :showPaginator="true"
                    :buttonCount="1"
                    :clearSelect="clearSelect"
                    :pageNumber="pageNumber"
                    :pageSize="pageSize"
                    :totalRecords="totalRecords"
                    :operateButtons="operateButtons"
                    :disabledPartialCheck="true"
                    :disabledPartialKey="'param_type'"
                    :disabledPartialLabel="'业务类'"
                    @on-operate="clickOperate"
                    @on-search="search"
                    @selection-change="selectChange"
                    @size-change="sizeChange"
                    @current-page-change="pageChange"
                    @preClick="pageChange"
                    @nextClick="pageChange"
      >
        <div class="operate-button-group">
          <el-button size="mini" type="primary" icon="el-icon-plus" @click="showModal('add')">新增</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="showModal('delete')">删除</el-button>
        </div>
    </table-view>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="540px">
      <div class="dialog-container" v-if="dialogTitle === '删除'">您确定要删除这些信息吗？</div>
      <div class="dialog-container" v-else>
        <input-list-view :items="dialogItems" :isCascaderShowAll="false" labelWidth="140px" width="500px"></input-list-view>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="save(dialogTitle)" v-if="showSaveButton">保存</el-button>
        <el-button type="primary" size="small" @click="confirm(dialogTitle)" v-if="!showSaveButton">确定</el-button>
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "ParamSet",
    data() {
      let baseUrl = managerRemoteUrl;
      return {
        urls: {
          getHeaderUrl: baseUrl + "/param/getHeader",//表头
          getTableDataUrl: baseUrl + "/param/getData", //列表
          addUrl: baseUrl + "/param/data", //新增和编辑
          deleteUrl: baseUrl + "/param/del", //删除
        },
        cols: [],
        tableData: [],
        selectedData: [],
        clearSelect: false,
        searchCondition: [],
        pageNumber: 1,
        pageSize: 10,
        totalRecords: 0,
        dialogTitle: "",
        dialogVisible: false,
        showSaveButton: true,
        dialogItems: [],
        operateButtons: ['编辑'],
        currentRow: null,
        searchFilter: {}, // 搜索
      };
    },
    mounted() {
      this.getHeader();
      this.getTableData();
    },
    methods: {
      //获取表头数据
      getHeader() {
        this.httpRequest("get", this.urls.getHeaderUrl, {}, {
          fullSuccess: true
        }).then(res => {
          this.cols = res.value.cols;
          this.searchCondition = [];
          res.value.cols.forEach(d => {
            if (d.search) {
              let obj = this.cloneObj(d);
              obj["label"] = d.header;
              obj["value"] = null;
              this.searchCondition.push(obj);
            }
          });
        })
      },
      // 获取表格数据
      getTableData() {
        let param = {
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          filter: this.searchFilter
        };
        this.httpRequest("post", this.urls.getTableDataUrl, param, {
          fullSuccess: true
        }).then(res => {
          if(res.value && res.value.data){
            this.tableData = res.value.data;
            this.totalRecords = res.value.rows;
          }else{
            this.tableData = [];
            this.totalRecords = 0;
          }
        })
      },
      // 显示弹框，新增、编辑、删除、重置密码等操作时显示
      showModal(str, data) {
        this.currentRow = data;
        if (str === "add") {
          this.dialogTitle = "新增";
          this.dialogItems = this.getModalDefaultInfo(this.cols, 'addable',this);
          this.dialogVisible = true;
          this.showSaveButton = true;
        } else if (str === "edit") {
          this.dialogTitle = "编辑";
          this.showSaveButton = true;
          let info = this.cloneObj(this.getModalDefaultInfo(this.cols,"editable",this));
          this.dialogItems = info.map(d => {
            let obj = this.cloneObj(d);
            obj["value"] = this.currentRow[d.field];
            this.currentRow.param_type === '系统类' && obj.field === 'param_key' && (obj["disabled"] = true);
            return obj;
          });
          this.dialogVisible = true;
        } else if (str === "delete") {
          if (this.selectedData.length <= 0) {
            this.$message.warning("请至少选择一项进行删除！");
            return;
          }
          this.dialogTitle = "删除";
          this.dialogVisible = true;
          this.showSaveButton = false;
        }
      },
      // 新增/编辑 保存
      save(title) {
        let param = this.saveVerification(this.dialogItems,this);
        if(!param){return;}
        if(title === "编辑"){
          param["id"] = this.currentRow["id"];
          this.saveData('put',param);
        }else{
          this.saveData('post',param);
        }
      },
      saveData(type,param) {
        this.httpRequest(type, this.urls.addUrl, param, {
          fullSuccess: true
        }).then(res => {
          this.message(this, "success", res.message);
          this.dialogVisible = false;
          this.getTableData();
        })
      },
      confirm(title) {
        if (title === "删除") {
          this.deleteData();
        }
      },
      //  删除数据
      deleteData() {
        let me = this;
        me.clearSelect = false;
        let ids = this.selectedData.map(d => {
          return d.id;
        });
        this.httpRequest("post", this.urls.deleteUrl, ids, {
          fullSuccess: true
        }).then(res => {
          me.message(me, "success", res.message);
          me.dialogVisible = false;
          me.pageNumber = 1;
          me.getTableData();
          me.clearSelect = true;
        }).catch(err => {
          me.dialogVisible = false;
        })
      },
      // 表格选中项发生改变时，触发的函数
      selectChange(selection) {
        this.selectedData = selection;
      },
      // pageSize更改时，触发的回调
      sizeChange(size) {
        this.pageNumber = 1;
        this.pageSize = size;
        this.getTableData();
      },
      // 上一页、下一页等改变pageNumber时的回调
      pageChange(page) {
        this.pageNumber = page;
        this.getTableData();
      },
      clickOperate(e) {
        switch (e.btnText) {
          case '编辑':
            this.showModal('edit', e.row)
            break;
          default:
            break;
        }
      },
      // 查询
      search(e) {
        let param = {filter: {}};
        e.forEach(d => {
          if (!this.isEmpty(d.value)) {
            if (d.type == "daterange") {
              param.filter[d.field] = [this.timeFormatInit(d.value[0]),this.timeFormatInit(d.value[1])];
            } else {
              param.filter[d.field] = [d.value];
            }
          }
        });
        this.pageNumber = 1;
        this.searchFilter = param.filter;
        this.getTableData();
      },
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../../assets/styles/base_style";
  .param-set-wrapper {
    width: 100%;
    height: 100%;
    .operate-button-group {
      margin-bottom: 10px;
    }
  }
</style>
